<%--
  Created by IntelliJ IDEA.
  User: 25306
  Date: 2025/10/15
  Time: 下午9:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>课程</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/iconfont/font_1/iconfont.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/iconfont/font_0/iconfont.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <style>
        html,
        body {
            height: 100%;
        }

        body>.wrap-cc {
            min-height: 100%;
        }

        .content-cc {
            /* padding-bottom 等于 footer 的高度 */
            padding-bottom: 80px;
        }

        .footer-cc {
            width: 100%;
            height: 80px;
            /* margin-top 为 footer 高度的负值 */
            margin-top: -80px;
        }
    </style>
    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>【
    <script>
        $(function() {
            $(".arrow").click(function() {
                $(this).parent().next().toggle();
            })

            $(".title-ul>li").on('click', function() {
                console.log($(this));
                $(this).addClass('current').siblings().removeClass("current");
                var panelId = "#" + $(this).attr("name");
                $(this).parent().siblings().css({
                    'display': 'none'
                });
                $(panelId).css({
                    'display': 'block'
                });

            })

            $(".padding-10000").click(function() {
                let resourceId = $(this).attr("data-id");
                let resourceFileType = $(this).attr("data-type");
                if("mp4"== resourceFileType){
                    $.ajax({
                        type: 'post',
                        url: '${pageContext.request.contextPath}/course/addBuyResource',
                        data: {"resourceId": resourceId},
                        dataType: "json",
                        success: function(result) {
                            if (result.responseCode == "2001") {
                                if(result.message=="您已拥有"){
                                    alert(result.message);
                                    location.href = "${pageContext.request.contextPath}/course/findVideo?id="+resourceId;
                                }else if(result.message=="购买成功"){
                                    alert(result.message);
                                    location.href = "${pageContext.request.contextPath}/course/findVideo?id="+resourceId;
                                }

                            } else {
                                alert(result.message);
                            }
                        }

                    });
                }else if("pdf"==resourceFileType){
                    $.ajax({
                        type: 'post',
                        url: '${pageContext.request.contextPath}/course/addBuyResource',
                        data: {"resourceId": resourceId},
                        dataType: "json",
                        success: function(result) {
                            if (result.responseCode == "2001") {
                                if(result.message=="您已拥有"){
                                    alert(result.message);
                                    location.href = "${pageContext.request.contextPath}/resource/Download?id="+resourceId;
                                }else if(result.message=="购买成功") {
                                    alert(result.message);
                                    location.href = "${pageContext.request.contextPath}/resource/Download?id="+resourceId;
                                }
                            } else {
                                alert(result.message);
                            }
                        }

                    });


                }
            })

            $("#userSetForm").on("submit", function(e) {
                e.preventDefault();
                let formData = new FormData($("#userSetForm")[0]);
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/user/UserInformationUpdate",
                    data: formData,
                    dataType: "json",
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            alert("更新成功！");
                            window.location.href = "${pageContext.request.contextPath}/showIndex";
                        } else {
                            alert(result.message);
                        }
                    }
                });
                return false;
            });

        })
    </script>
</head>

<body>
<div class="wrap-cc">
    <div class="content-cc">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <!--  <a class="navbar-brand" href="#">Brand</a> -->
                    <a href="${pageContext.request.contextPath}/showIndex"><img src="${pageContext.request.contextPath}/images/com-logo1.png" alt="" width="120" style="margin-right: 20px;"></a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="#" class="vertical-middle">免费课程</a></li>
                        <li><a href="#" class="vertical-middle">职业路径</a></li>
                    </ul>
                    <form class="navbar-form navbar-left searchInput" style="padding:10px;">
                        <div class="form-group">
                            <input type="text" class="form-control " placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default "><span class="glyphicon glyphicon-search"></span></button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle user-active" data-toggle="dropdown" role="button">
                                <img class="img-circle" src="${pageContext.request.contextPath}/images/user.png" id="userImg">
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu userinfo cc">
                                <li>
                                    <img src="${pageContext.request.contextPath}/images/user.png" class="img-circle" alt="">
                                    <div class="">
                                        <p>我叫${user.nickname}</p>
                                        <p>金币<span>${user.allGold}</span>&nbsp;积分 <span>${user.allPoint}</span></p>
                                    </div>
                                </li>
                                <li>
                                    <a href="${pageContext.request.contextPath}/userResource/findAll">
                                        <i class="glyphicon glyphicon-edit"></i>我的课程
                                    </a>
                                    <a href="${pageContext.request.contextPath}/goldPoints/findAll">
                                        <i class="glyphicon glyphicon-record"></i>积分记录
                                    </a>
                                </li>
                                <li>
                                    <a  href="#" data-toggle="modal" data-target="#userSet">
                                        <i class="glyphicon glyphicon-cog"></i>个人设置
                                    </a>
                                    <a href="javascript:void(0);"><i class="glyphicon glyphicon-off"></i>退出登录</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>

            </div>

        </nav>
        <div class="container-fluid banner">
            <div class="container banner-contain">
                <div class="row">
                    <p> ${course.courseType01.typeName}&bsol;${course.courseType02.typeName}&bsol;${course.courseType03.typeName}&bsol;${course.courseName}</p>
                </div>
                <div class="row">
                    <p>${course.courseName}</p>
                </div>
                <div class="row">
                    <button class="btn    btn-success  col-md-2">
                        继续学习 | &nbsp;&nbsp; <i class="glyphicon glyphicon-star-empty">  </i>
                    </button>
                    <ul class="col-md-5">
                        <li>点击量
                            <p> 45571 </p>
                        </li>
                        <li> 课程时长
                            <p>3小时21分</p>
                        </li>
                        <li> 综合评分
                            <p>9.7</p>
                        </li>
                    </ul>
                    <ul class="three-logo  col-md-4  col-md-offset-1 ">
                        <li>
                            <i class="icon iconfont icon-weixin"></i>
                        </li>
                        <li>
                            <i class="icon iconfont icon-weibo"></i>
                        </li>
                        <li>
                            <i class="icon iconfont icon-qq"></i>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-9">
                    <div class="desp">简介：${course.courseInfo}</div>
                    <ul class="title-ul">
                        <li class="current" name="chapter">章节</li>
                        <li name="comment">评价</li>
                    </ul>
                    <ul class="course-content margin-bottom-90" id="chapter">
                        <c:forEach items="${course.chapters}" var="chapter" varStatus="status">
                            <li>
                                <div class="row">
                                    <div class="col-md-12 course-title">
                                        <i class="icon  i-round iconfont icon-weibiaoti-"></i> 第${status.index + 1}章 <span> ${chapter.title} </span>
                                        <span style="color: red" class="errorMsg"></span>
                                        <i class="glyphicon glyphicon-triangle-bottom pull-right arrow"></i>
                                    </div>
                                    <ul class="lesson-title">
                                        <c:forEach items="${chapter.resources}" var="resource">
                                            <li class="col-md-11 col-md-offset-1 padding-10 padding-10000" data-id="${resource.id}" data-type="${resource.fileType}">
                                                <span class="glyphicon glyphicon-triangle-right icon-right"> </span>
                                                <a ><span> ${resource.title} </span></a>
                                            </li>
                                        </c:forEach>
                                    </ul>
                                </div>
                            </li>
                        </c:forEach>
                    </ul>
                    <ul id="comment" class="margin-bottom-90">
                        <li>
                            <div class="row comment-area">
                                <div class="col-md-1"><img src="images/user.jpeg" alt="" class="img-circle " width="35" height="35"></div>
                                <div class="col-md-10 comment-info">
                                    <div class="col-md-12">user01</div>
                                    <div class="col-md-12">正在研究大数据分析，挺有用的</div>
                                    <div class="col-md-12">
                                        <div>
                                            时间：<span>22小时前</span>
                                        </div>
                                        <div>
                                            <span>举报</span>
                                            <span><i class="icon iconfont icon-zan"></i>12</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="row comment-area">
                                <div class="col-md-1"><img src="images/user.jpeg" alt="" class="img-circle " width="35" height="35"></div>
                                <div class="col-md-10 comment-info">
                                    <div class="col-md-12">user01</div>
                                    <div class="col-md-12">正在研究大数据分析，挺有用的</div>
                                    <div class="col-md-12">
                                        <div>
                                            时间：<span>22小时前</span>
                                        </div>
                                        <div>
                                            <span>举报</span>
                                            <span><i class="icon iconfont icon-zan"></i>12</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="load-more">
                                <span onclick="alert('正在加载...');">加载更多...</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <div class="row teacher-msg">
                        <div class="col-md-12 course-title padding-30">推荐课程</div>
                    </div>
                    <c:forEach items="${courses}" var="course">
                        <div class="row  recommd-course">
                            <div class="col-md-4">
                                <img src="${pageContext.request.contextPath}${course.coverImageUrl}" alt="">
                            </div>
                            <div class="col-md-8">
                                <div><a href="${pageContext.request.contextPath}/course/findByIdAll?id=${course.id}">${course.courseName}</a></div>
                                <div>${course.courseInfo}</div>
                            </div>
                        </div>
                    </c:forEach>
                </div>
            </div>
        </div>
        <div class="modal fade" id="userSet" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">个人信息</h4>
                    </div>
                    <form action="#" class="form-horizontal" method="post" id="userSetForm">

                        <input type="hidden" name="id" value="${user.id}" />

                        <div class="modal-body">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">旧密码：</label>
                                <div class="col-sm-6">
                                    <input class="form-control" type="password" name="oldPassword" />
                                </div>
                            </div>
                            <!-- 修改为正确的新密码字段 -->
                            <div class="form-group">
                                <label class="col-sm-3 control-label">新密码：</label>
                                <div class="col-sm-6">
                                    <input class="form-control" type="password" name="newPassword" />
                                </div>
                            </div>
                            <!-- 保留一个确认密码字段 -->
                            <div class="form-group">
                                <label class="col-sm-3 control-label">确认密码：</label>
                                <div class="col-sm-6">
                                    <input class="form-control" type="password" name="confirmPassword" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">昵称：</label>
                                <div class="col-sm-6">
                                    <input class="form-control" type="text" name="nickname" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">邮箱：</label>
                                <div class="col-sm-6">
                                    <input class="form-control" type="text" name="email" />
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-info" data-dismiss="modal" aria-label="Close">关&nbsp;&nbsp;闭</button>
                            <button type="reset" class="btn btn-info">重&nbsp;&nbsp;置</button>
                            <button type="submit" class="btn btn-info">确&nbsp;&nbsp;定</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer-cc">
    <div class="footer">
        <div>
            版权所有： 南京网博
        </div>
        <div>
            Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2
        </div>
    </div>
</div>
</body>

</html>
